<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-09-18 11:31:37
 * @description: 商品详情页购物车
 -->
<template>
  <view>
    <view class="goods-found">
      <view v-if="coupon_list.length && showCoupon" class="sLine" @click="showPopup">
        <view class="lCont">领券</view>
        <view class="rCont coupon_box">
          <block v-for="(item, index) in coupon_list" :key="index">
            <view v-if="index < 3" class="coupon_item">
              {{ item.standard_price > 0 ? `满${item.standard_price}减${item.price}` : item.price + '元无门槛' }}
            </view>
          </block>
          <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
        </view>
      </view>
      <!-- <view v-if="allData.full_cut_str" class="sLine" @click="showProm=true"> -->
      <view v-if="allData.full_cut_str" class="sLine" @click="lookFullCutShop">
        <view class="lCont">活动</view>
        <view class="rCont coupon_box">
          <text class="prom-tip-ico">满减</text>
          <text class="prom-txt">
            {{ allData.full_cut_str }}
          </text>
          <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
        </view>
      </view>
    </view>
    <block v-if="showCoupon">
      <base-popup :show="pShow" :show-close="false" :has-scroll="true" @close="closePopup">
        <view v-if="coupon_list.length" class="maskContainer couponMask">
          <view class="cartClose" @click="closePopup">
            <image src="/static/images/icon/icon_close.png" />
          </view>
          <view>
            <coupon-list :coupon-list="coupon_list" @selectCoupon="selectCoupon"></coupon-list>
          </view>
        </view>
      </base-popup>
    </block>
    <!-- <base-popup :show="showProm" :show-close="true" :has-scroll="true" @close="closePopup">
      <view class="prom-list-container">
        <view class="prom-title">促销</view>
        <view class="prom-list">
          <view class="prom-list-item">
            <text class="prom-item-content">{{ allData.full_cut_str }} </text>
            <image class="prom-r-ico" src="/static/images/icon/icon_arror_right.png" />
          </view>
        </view>
      </view>
    </base-popup> -->
  </view>
</template>
<script>
import CouponList from '@/components/coupon-list/coupon-list.vue'
export default {
  name: 'CommodityCoupon',
  components: {
    CouponList
  },
  props: {
    goods: {
      type: Object,
      required: true,
      default: null
    },
    allData: {
      type: Object,
      default: null
    },
    showCoupon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      coupon_list: [],
      pShow: false,
      once: false,
      showProm: false // 显示促销
    }
  },
  watch: {
    'showCoupon'(newVal) {
      if (newVal && this.coupon_list.length <= 0) {
        this.getCouponList()
      }
    }
  },
  created() {
    if (this.showCoupon) {
      this.getCouponList()
    }
  },
  methods: {
    closePopup() {
      this.$set(this, 'showProm', false)
      this.$set(this, 'pShow', false)
    },
    async getCouponList(val) {
      if (this.goods.type === 4 && !this.once) {
        this.once = true
        return
      }
      // 可能存在的需要修改id重新获取优惠券的情况： 组合套餐（type 201）
      const id = (val || this.goods.goods_id)
      const res = await this.$api.couponApi.getCouponList({
        goods_id: id,
        page_no: 1,
        page_size: 100
      }, { showMessage: false })
      if (res.code) {
        return
      }
      this.$set(this, 'coupon_list', res.data)
    },
    async selectCoupon(item) {
      // if (item.received && !(item.received !== 1 && item.received < item.repeat_quantity) || item.repeat_quantity === 0) {
      //   this.$vux.toast.text('已领取,请勿重复领取')
      //   return
      // }
      const res = await this.$api.couponApi.receiveCoupon({
        coupon_activity_id: item.coupon_activity_id,
        fromPath: 'GOODS_DETAIL',
        platform: 'H5'
      })
      if (!res.code) {
        uni.showToast({
          title: '领取成功, 请到我的-优惠券中心查看',
          icon: 'none',
          duration: 2 * 1000
        })
        const index = this.coupon_list.findIndex(i => i.coupon_activity_id === item.coupon_activity_id)
        if (index !== -1) {
          this.coupon_list[index].received = 1
        }
        // this.$set(item, 'received', ++item.received) 这样既然无用
      }
      // window.__sensors__.track('receiveDiscount', {
      //   discount_name: item.name,
      //   discount_amount: item.price
      // })
    },
    showPopup() {
      this.pShow = true
    },
    // 去满减专题页
    lookFullCutShop() {
      this.$navigateTo('/pagesDetail/fullcut/index?id=' + this.allData.full_cut_id + '&from=detail')
    }
  }
}
</script>
<style lang="scss" scoped>
.couponMask{
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.prom-tip-ico {
  width:52rpx;
  height:30rpx;
  border:1rpx solid rgba(226,21,54,1);
  border-radius:5rpx;
  line-height: 30rpx;
  text-align: center;
  color: rgba(226,21,54,1);
  display: inline-block;
  margin-right: 10rpx;
}
.prom-txt {
  width: 500rpx;
  @include text-ellipsis-line(1);
}
.commodity-container .goods-found .sLine .rCont .right_arror {
  top: 50%;
  transform: translateY(-50%);
}
.prom-list-container {
  padding: 30rpx;
  .prom-title {
    font-size:34rpx;
    color:#000;
  }
  .prom-list {
    height: 500rpx;
    padding: 30rpx 0;
    overflow-y: auto;
  }
  .prom-list-item {
    border-bottom: 1px solid rgba(234,234,234,1);
    padding: 20rpx 0;
    position: relative;
  }
  .prom-item-content {
    font-size:26rpx;
    color:rgba(207,21,47,1);
    line-height: 40rpx;
    width: 640rpx;
    display: block;
    @include text-ellipsis-line;
  }
  .prom-r-ico {
    width:12rpx;
    height: 22rpx;
    position: absolute;
    top: 50%;
    right: 10rpx;
    margin-top: -11rpx;
  }
}

</style>
